<template>
	<view class="page">
		<view class="status_box">
			<view class="status" :class="{active:state == 0}" @click="changeState(0)">已预约</view>
			<view class="status" :class="{active:state == 1}" @click="changeState(1)">已接单</view>
			<view class="status" :class="{active:state == 2}" @click="changeState(2)">已报价</view>
			<view class="status" :class="{active:state == 3}" @click="changeState(3)">已完成</view>
		</view>
		<view class="list">
			<view class="item" v-for="item in list">
				<view class="name" @click="toDetail(item)">
				{{item.name}} 
				<block v-if="item.state != 3">
					<span class="goLabel" v-if="item.arriveswitch == 1">回收员已到达</span>
					<span class="goLabel" v-else-if="item.goswitch == 1">回收员已出发</span>
				</block>
					<block v-if="item.state == 3 && item.evaluate_type != 9">
						<span class="goLabel" v-if="item.evaluate_type == 0">很满意</span>
						<span class="goLabel" v-if="item.evaluate_type == 1">满意</span>
						<span class="textRed" v-if="item.evaluate_type == 2">不满意</span>
					</block>
				</view>
				<view class="text" @click="toDetail(item)">预约时间：<text class="fr">{{item.appointmenttime}}</text></view>
				<view class="text" @click="toDetail(item)">物品重量：<text class="fr">{{kgList[item.kg]}}</text></view>
				<view class="bottom">
					<template v-if="item.state == 0">
						<text @click="editOrder(item)">修改</text>
						<text @click="deleteOrder(item)">取消</text>
					</template>
					<template v-if="item.state == 1">
						<text @click="call(item)">联系回收员</text>
					</template>
					<template v-if="item.pay_state == 1 && item.state == 2">
						<text @click="payMoney(item)">付款</text>
					</template>
					<template v-if="item.evaluate_type == 9 && item.state == 3">
						<text @click="evaluate(item)">评价</text>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state:0,
				page:1,
				pagesize:10000,
				list:[],
				kgList:["0~10kg","10~50kg","50~100kg","100kg以上"]
			}
		},
		methods: {
			changeState(state){
				this.state = state;
				this.getList()
			},
			getList(){
				this.$get('user/releaselist', {
					state:this.state,
					page:this.page,
					pagesize:this.pagesize,
				}, (res) => {
					console.log(res)
					this.list = res.list
				})
			},
			editOrder(item){
				uni.navigateTo({
					url:"/pages/appointment/appointment?id="+item.id
				})
			},
			deleteOrder(item){
				uni.showModal({
				    title: '提示',
				    content: '确认取消该订单吗？',
				    success: (res)=> {
				        if (res.confirm) {
				            this.$get('user/refuseorder', {id:item.id,reason:"",}, (res) => {
				            	uni.showToast({title:"取消成功！",})
								this.getList()
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			call(item){
				uni.makePhoneCall({
						phoneNumber: item.recovery_user_phone,
						success: (res) => {
							console.log('调用成功!')
						},
						fail: (res) => {
							console.log('调用失败!')
							this.call();//重复调用一次
						}
					});
			},
			toDetail(item){
				uni.navigateTo({
					url:"/pages/order/info?id="+item.id
				})
			},
			evaluate(item){
				uni.navigateTo({
					url:"/pages/evaluate/evaluate?id="+item.id
				})
			},
			payMoney(item){
				this.$pay('pay/pay',{
					pay_type:2,
					release_id:item.id
				},(res)=>{
					console.log(res)
					uni.requestPayment({
					    timeStamp: res.timeStamp,
					    nonceStr: res.nonceStr,
					    package: res.package,
					    signType: res.signType,
					    paySign: res.paySign,
					    success: (res) => {
					        uni.showToast({
					            title: "支付成功!"
					        })
							this.getList()
					    },
					    fail: (res) => {
					        uni.showModal({
					            content: "支付失败",
					            showCancel: false
					        })
					    },
					    complete: () => {
					        this.loading = false;
					    }
					})
				})
			},
		},
		onLoad(options) {
			this.state = options.state || 0;
		},
		onShow() {
			this.getList()
		}
	}
</script>

<style>
	.page{
		padding-top: 100rpx;
	}
	.status_box{
		display: flex;
		background-color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.status_box .status{
		flex: 1;
		margin: 0 30rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	}
	.status_box .status.active{
		color: #22BF8A;
		border-bottom: 1px solid #22BF8A;
	}
	.list{
		padding: 20rpx 30rpx;
	}
	.list .item{
		background-color: #FFFFFF;
		padding: 30rpx 0;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}
	.list .item .name{
		padding: 0 40rpx;
		font-size: 36rpx;
		margin-bottom: 30rpx;
		font-weight: bold;
	}
	.list .item .goLabel{
		font-size: 24rpx;
		float: right;
		font-weight: normal;
		color: #22BF8A;
		line-height: 50rpx;
	}
	.textRed{
		font-size: 24rpx;
		float: right;
		font-weight: normal;
		color: #dd2727;
		line-height: 50rpx;
	}
	.list .item .text{
		line-height: 60rpx;
		font-size: 26rpx;
		padding: 0 40rpx;
	}
	.list .item .bottom{
		text-align: right;
		border-top: 1px solid #E5E5E5;
		margin-top: 20rpx;
		padding-top: 20rpx;
		
	}
	.list .item .bottom text{
		margin-right: 20rpx;
		padding: 0 34rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		border: 1px solid #E5E5E5;
		border-radius: 4px;
		display: inline-block;
	}
</style>
